<template>
  <div class="container">
    <div class="nav_l">
      <!-- collapse 属性：控制菜单收缩展开 -->
      <el-tree :data="data" :expand-on-click-node="false" @node-click="handleNodeClick" default-expand-all>
        <div slot-scope="{ data}" :class="activeIndex!=data.id? 'custom_tree_node':'active_tree_node'">
          <div>
            <img :src="activeIndex!=data.id?data.icon:data.activeIcon" alt="加载失败">
          </div>
          <div>
            <div>{{ data.label }}</div>
          </div>
        </div>
      </el-tree>
      <el-menu
        class="side-menu"
        :default-active="activeIndex"
        @select="selectMenu"
      >
        <el-menu-item
          index="6"
          class="recovery"
        >
          <img
            :src="activeIndex==6?require('@/assets/image_library/menu/dustbinActive.png'):require('@/assets/image_library/menu/dustbin.png')"
            class="menuIcon"
          />
          <span slot="title">回收站</span>
        </el-menu-item>
        <el-menu-item
          index="7"
          class="my-share"
          v-if="$store.getters.roles.includes('teacher')"
        >
          <img
            :src="activeIndex==7?require('@/assets/image_library/menu/courseActive.png'):require('@/assets/image_library/menu/course.png')"
            class="menuIcon"
          />
          <span slot="title">正式课</span>
        </el-menu-item>
        <el-menu-item
          index="8"
          class="my-share"
          v-if="$store.getters.roles.includes('teacher')"
        >
          <img
            :src="activeIndex==8?require('@/assets/image_library/menu/draftActive.png'):require('@/assets/image_library/menu/draft.png')"
            class="menuIcon"
          />
          <span slot="title">草稿箱</span>
        </el-menu-item>
      </el-menu>
      <div class="library_capacity">
        <el-progress :percentage="storageInfo.storageSizePercentage*1||0" :show-text="false"
                     :color="getColor(storageInfo.storageSizePercentage*1||0)"
        ></el-progress>
        <div class="progressText">
          <div>{{ convertBytes(storageInfo.storageSize) }}/{{ storageInfo.totalStorageSize || 0 }}G</div>
          <div>{{ storageInfo.storageSizePercentage || 0 }}%</div>
        </div>
      </div>
    </div>
    <div class="content_r">
      <div class="content_top" v-if="activeIndex!='6'">
        <div class="top_one" v-if="activeIndex!='7'&&activeIndex!='8'">
          <div class="btns">
            <div>
              <el-button icon="el-icon-upload2" size="mini" v-if="activeIndex==='0'" @click="uploadFilesopen()" round>
                上传文件
              </el-button>
            </div>
            <div>
              <el-button icon="el-icon-circle-plus-outline" size="mini" v-if="activeIndex==='0'" @click="addFiles"
                         round
              >
                新建文件夹
              </el-button>
            </div>
          </div>
          <div>
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              clearable
              style="width: 300px;"
              @input="searchFiles('refresh')"
              @clear="clearSearch"
              v-model="search_text"
            >
            </el-input>
          </div>
        </div>
        <div class="top_two">
          <div v-if="search_text==''&&activeIndex!=7&&activeIndex!=8">
            <span v-if="activeIndex!=0" @click="selectMenu('0')">
                我的文件<i class="el-icon-arrow-right"></i>
            </span>

            <span v-for="(item,index) in pathArr">
              <span v-if="index==0">
                <span @click="brandClick(0,index)">{{ myFileMenuMap[activeIndex] }}</span>
              </span>
              <!--              <span v-if="index==0&&activeIndex!=0" @click="getFilesList(0)">-->
              <!--                <i class="el-icon-arrow-right"></i>-->
              <!--                  <span>{{ myFileMenuMap[activeIndex] }}</span>-->
              <!--              </span>-->
               <span v-if="index==0&&isPathLength">   <i class="el-icon-arrow-right"></i> ...</span>
              <span v-if="index>0&&(!isPathLength||pathArr.length-index<=3)" @click="brandClick(item.id,index)">
                <span>
                  <i class="el-icon-arrow-right"></i>
                </span> {{ item.fileName }}</span>
            </span>
          </div>
          <div v-if="search_text==''&&activeIndex==7||activeIndex==8">
            <span v-for="(item,index) in courseArr">
              <span v-if="index==0" @click="coursebrandClick(item.keyId,item.keyType,item.indexType,index)">
                {{ myFileMenuMap[activeIndex] }}
              </span>
               <span v-if="index==0&&isCourseLength">   <i class="el-icon-arrow-right"></i> ...</span>
              <span v-if="index>0&&(!isCourseLength||courseArr.length-index<=3)"
                    @click="coursebrandClick(item.keyId,item.keyType,item.indexType,index)"
              >
                <span>
                  <i class="el-icon-arrow-right"></i>
                </span> {{ item.keyName }}</span>
            </span>
          </div>
          <div v-if="search_text!=''&&activeIndex!==7&&activeIndex!==8">
            <span>
              <span @click="searchBand()">
                {{ myFileMenuMap[activeIndex] }}
              </span>
              <span>
                <span>
                  <i class="el-icon-arrow-right"></i>
                </span> {{ `"${search_text}"的搜索结果` }}</span>
            </span>
          </div>
        </div>
        <div class="top_three">
          <div>
            <el-button type="primary" size="mini" @click="checkAllItem">{{ checkAll ? '取消全选' : '全选' }}</el-button>
            <el-button type="primary" size="mini" @click="handelMove('copy')" v-if="checkList.length!=0||checkAll">复制到
            </el-button>
            <el-button type="primary" size="mini"
                       v-if="activeIndex!='7'&&activeIndex!='8'&&(checkList.length!=0||checkAll)"
                       @click="handelMove('move')"
            >移动到
            </el-button>
            <el-button type="danger" size="mini"
                       v-if="activeIndex!='7'&&activeIndex!='8'&&(checkList.length!=0||checkAll)"
                       @click="deleteByID"
            >删除
            </el-button>
          </div>
          <div class="iconBtn" v-if="activeIndex!='7'&&activeIndex!='8'">
            <div class="refreshList">
              <i class="el-icon-refresh-right" @click="refreshFiles()"></i>
            </div>
            <el-dropdown :hide-on-click="false">
             <span class="el-dropdown-link">
               <img src="@/assets/image_library/filterIcon.png" class="filterIcon"/>
             </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item disabled>规则排序</el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="sortType" label="1">文件名称</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="sortType" label="2">创建时间</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="sortType" label="3">修改时间</el-radio>
                </el-dropdown-item>
                <el-dropdown-item divided disabled>排序</el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="orderType" label="1" v-if="sortType==='1'">名称从A到Z</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="orderType" label="2" v-if="sortType==='1'">名称从Z到A</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="orderType" label="2" v-if="sortType!=='1'">时间从近到远</el-radio>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-radio v-model="orderType" label="1" v-if="sortType!=='1'">时间从远到近</el-radio>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="dustbin_top" v-if="activeIndex=='6'">
        <div class="dustbinTotal">回收站文件大小：{{ dustbintotalSize }}</div>
        <div>
          <el-button icon="el-icon-delete" size="mini" @click="Cleardustbin" round>清空回收站</el-button>
        </div>
        <div class="tips">
          提示：回收站中文件将在30天后自动删除
        </div>
      </div>
      <!--      <div class="upload_document" v-if="files.length==0&&activeIndex=='0'">上传文件</div>-->
      <div :class="activeIndex=='6'?'dustbin filecontnet':'filecontnet deafult'" v-loading="loading">
        <el-empty :description="search_text!==''?'我的文件中并未找到相关文件':'暂无数据'"
                  v-if="((files.length==0&&activeIndex!='6')||(dustbinList.length==0&&activeIndex=='6'))&&!loading"
                  class="empty"
                  :image="require('@/assets/image_library/nodata.png')"
        ></el-empty>
        <FileList
          ref="files"
          v-model="checkAll"
          v-if="files.length!=0&&activeIndex!='6'&&activeIndex!='7'&&activeIndex!='8'"
          :fileType="fileType"
          :fileList="files"
          :search_text="search_text"
          @checklist="getchecklist"
          @nextInto="nextInto"
          @lookMore="loadMoreData"
          @openfileParent="openfileParent"
          @isEdit="getEditFile"
          map="library"
          isAdmin="isAdmin"
          isGroupowner="isGroupowner"
        ></FileList>
        <Dustbin
          v-if="activeIndex=='6'&&dustbinList.length!=0"
          :tableData="dustbinList"
          @lookMore="loadMoredustbin"
        >
        </Dustbin>
        <CourseList
          v-if="(activeIndex=='7'||activeIndex=='8')&&files.length!==0"
          v-model="checkAll"
          :fileList="files"
          @checklist="getchecklist"
          @nextCourse="nextCourse"
        ></CourseList>
      </div>
      <div class="content_footer" v-if="activeIndex!='6'">
        <div>
          <span class="footer_left">{{ files.length }}个项目</span>
          <span>已选择 <span class="check_num">{{ checkList.length }}</span> 个项目</span>
        </div>
      </div>
    </div>
    <!--    移动复制-->
    <MoveDialog ref="moveDialog"></MoveDialog>
    <copyFormCourse ref="copyFormCourse"></copyFormCourse>
    <!--    上传-->
    <UploadInput @refreshList="finishUpload" ref="uploadInput"></UploadInput>
  </div>
</template>

<script>

import FileList from '@/views/library_homePage/component/FileList.vue'
import Dustbin from '@/views/library_homePage/component/dustbin.vue'
import CourseList from '@/views/library_homePage/component/course.vue'
import MoveDialog from '@/views/library_homePage/component/moveDialog.vue'
import {
  getfileList,
  fileSearch,
  batchDeleteFile,
  getdustbinList, clearDustbinList, storageInfo, formalCourseList, getdustbinfileSize
} from '@/api/library_index'
import { mapGetters, mapMutations } from 'vuex'
import copyFormCourse from '@/views/library_homePage/component/copyFormCourse.vue'
// 上传组件
import UploadInput from '@/components/library_upload/index.vue'
import { convertBytes } from '@/views/library_homePage/utils/files'

export default {
  name: 'HomePage',
  components: { copyFormCourse, FileList, Dustbin, MoveDialog, CourseList, UploadInput },
  data() {
    return {
      // 菜单 index 和名称 Map
      myFileMenuMap: {
        0: '我的文件',
        1: '文档',
        2: '音频',
        3: '视频',
        4: '图片',
        5: '其他',
        6: '回收站',
        7: '正式课',
        8: '草稿箱'
      },
      activeIndex: '0',
      fileType: 0,
      files: [],
      capacity: 90,
      search_text: '',
      dustbinList: [],
      sortType: '3',
      orderType: '2',
      checkAll: false,
      isEdit: false,
      checkList: [],
      storageInfo: {},
      dustbintotalSize: 0,
      total: 0,
      pageSize: 100,
      pageNum: 1,
      data: [
        {
          label: '我的文件',
          id: '0',
          icon: require('@/assets/image_library/menu/dir.png'),
          activeIcon: require('@/assets/image_library/menu/dirActive.png'),
          children: [
            {
              label: '文档',
              id: '1',
              icon: require('@/assets/image_library/menu/text.png'),
              activeIcon: require('@/assets/image_library/menu/textActive.png')
            },
            {
              label: '音频',
              id: '2',
              icon: require('@/assets/image_library/menu/audeo.png'),
              activeIcon: require('@/assets/image_library/menu/audeoActive.png')
            },
            {
              label: '视频',
              id: '3',
              icon: require('@/assets/image_library/menu/video.png'),
              activeIcon: require('@/assets/image_library/menu/videoActive.png')
            },
            {
              label: '图片',
              id: '4',
              icon: require('@/assets/image_library/menu/image.png'),
              activeIcon: require('@/assets/image_library/menu/imageActive.png')
            },
            {
              label: '其他',
              id: '5',
              icon: require('@/assets/image_library/menu/other.png'),
              activeIcon: require('@/assets/image_library/menu/otherActive.png')
            }
          ]
        }
      ],
      loading: true,
      convertBytes: function(num) {
        return convertBytes(num)
      }
    }
  },
  computed: {
    ...mapGetters('libraryFile', ['pathArr', 'courseArr']),
    // 计算路径字符数是否超过64
    isPathLength() {
      let num = 4
      console.log(this.pathArr)
      this.pathArr.forEach((item, index) => {
        if (index !== 0) {
          num += item.fileName.length
        }
      })
      if (this.activeIndex != 0) {
        num += this.myFileMenuMap[this.activeIndex].length
      }
      return num > 64
    },
    isCourseLength() {
      let num = 3
      this.courseArr.forEach((item, index) => {
        if (index !== 0) {
          num += item.keyName.length
        }
      })
      return num > 64
    }

  },
  mounted() {
    this.getFilesList(0)
    this.clearPathArr()
    this.getstorageInfo()
  },
  watch: {
    sortType() {
      this.pageNum = 1
      this.pageSize = 100
      this.total = 0
      if (this.search_text == '') {
        this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
      } else {
        this.searchFiles('refresh')
      }

    },
    orderType() {
      this.pageNum = 1
      this.pageSize = 100
      this.total = 0
      this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
    }
  },
  methods: {
    ...mapMutations('libraryFile', ['removePath', 'clearPathArr', 'removecoursePath', 'clearcoursePathArr']),
    finishUpload() {
      this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
    },
    handleNodeClick(data) {
      this.selectMenu(data.id)
    },
    // 清空搜索
    clearSearch() {
      this.pageNum = 1
      this.pageSize = 100
      this.total = 0
      this.search_text = ''
      if (this.activeIndex != 7 && this.activeIndex !== 8) {
        this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
      } else {
        this.getCourseList(this.courseArr[this.courseArr.length - 1].keyId, this.courseArr[this.courseArr.length - 1].keyType, this.courseArr[this.courseArr.length - 1].indexType)
      }
    },
    refreshFiles() {
      this.pageNum = 1
      this.pageSize = 100
      this.total = 0
      this.search_text = ''
      if (this.activeIndex != 7 && this.activeIndex !== 8) {
        this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
      } else {
        this.getCourseList(this.courseArr[this.courseArr.length - 1].keyId, this.courseArr[this.courseArr.length - 1].keyType, this.courseArr[this.courseArr.length - 1].indexType)
      }
    },
    // 文件加载更多
    loadMoreData() {
      if (this.total > this.files.length) {
        this.pageNum++
        if (this.search_text == '') {
          this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
        } else {
          this.searchFiles('loadMore')
        }
      } else {
        console.log('没有更多了')
      }
    },
    // 回收站加载更多
    loadMoredustbin() {
      if (this.total > this.dustbinList.length && !this.loading) {
        this.pageNum++
        this.getdustbin()
      } else {
        this.loading = false
        console.log('没有更多了')
      }
    },
    // 查询文件列表
    async getFilesList(parentId) {
      if (this.pageNum == 1) {
        this.loading = true
      }
      this.checkList = []
      let res = await getfileList({
        fileType: this.fileType,
        parentId: parentId,
        sortType: this.sortType,
        orderType: this.orderType,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      })
      if (res.code == 200) {
        this.total = res.total
        if (this.pageNum == 1) {
          this.files = res.rows
        } else {
          this.files.push(...res.rows)
        }
        this.files = this.files.map((item, index) => ({
          ...item,
          index: index + 1
        }))
      }
      this.loading = false

    },
    // 获取课程列表
    async getCourseList(keyId, keyType, indexType, folderNo) {
      this.loading = true
      let res = await formalCourseList({
        keyId,
        keyType,
        indexType,
        folderNo,
        temporaryState: this.activeIndex == 7 ? 1 : 0,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      if (res.code == 200) {
        this.files = res.data
      }
      this.loading = false
    },
    // 面包屑点击
    brandClick(parentId, index) {
      this.pageNum = 1
      this.pageSize = 100
      this.getFilesList(parentId)
      this.removePath(index)
    },
    // 课程面包屑点击
    coursebrandClick(keyId, keyType, indexType, index) {
      this.getCourseList(keyId, keyType, indexType)
      this.removecoursePath(index)
    },
    // 搜索
    async searchFiles(type) {
      if (this.search_text !== '') {
        if (type == 'refresh') {
          let res = await fileSearch({
            fileName: this.search_text,
            sortType: this.sortType,
            orderType: this.orderType,
            fileType: this.fileType,
            pageSize: 100,
            pageNum: 1
          })
          if (res.code == 200) {
            this.total = res.total
            this.files = res.rows
          }
        } else {
          let res = await fileSearch({
            fileName: this.search_text,
            sortType: this.sortType,
            fileType: this.fileType,
            orderType: this.orderType,
            pageSize: this.pageSize,
            pageNum: this.pageNum
          })
          if (res.code == 200) {
            console.log(res.data)
            // this.files = res.rows
            this.total = res.total
            if (this.pageNum == 1) {
              this.files = res.rows
            } else {
              this.files.push(...res.rows)
            }
            this.files = this.files.map((item, index) => ({
              ...item,
              index: index + 1
            }))
          }
        }

      } else {
        this.getFilesList(0)
      }
      this.clearPathArr()
    },
    // 搜索
    searchBand() {
      this.pageNum = 1
      this.pageSize = 100
      this.total = 0
      this.search_text = ''
      this.getFilesList(0)
    },
    // 左侧文件类型切换
    selectMenu(index) {
      this.pageNum = 1
      this.pageSize = 100
      this.total = 0
      this.checkList = []
      this.checkAll = false
      this.activeIndex = index
      this.fileType = index - 0
      this.search_text = ''
      if (this.fileType < 5 || this.fileType === 5) {
        this.getFilesList(0)
      }
      if (this.fileType === 6) {
        this.getdustbin()
        this.getDustbinSize()
      }
      if (this.fileType === 7 || this.fileType === 8) {
        this.getCourseList()
      }
      this.clearPathArr()
      this.clearcoursePathArr()
    },
    // 进度条颜色
    getColor(percentage) {
      if (percentage * 1 > 90 || percentage * 1 == 90) {
        return '#f56c6c'
      }
    },
    // 获取选中文件列表
    getchecklist(data) {
      this.checkList = data.arr
    },
    // 全选
    checkAllItem() {
      if (this.files.length == 0) {
        this.$message({ message: '当前没有任何文件，请先进行文件上传', type: 'info' })
        return
      }
      this.checkAll = !this.checkAll
    },
    // 获取是否有编辑状态文件
    getEditFile(data) {
      this.isEdit = data.isEdit
    },
    // 新建文件夹
    async addFiles() {
      if (this.isEdit) {
        this.isEdit = false
        return
      }
      this.isEdit = true
      let arr = JSON.parse(JSON.stringify(this.files))
      arr = arr.filter(item => {
        return item.fileName.includes('新建文件夹')
      })
      let item = {
        fileName: '新建文件夹',
        isDir: 1,
        reSetName: true,
        checked: false
      }
      this.files.unshift(item)

    },
    // 下一层级
    nextInto(data) {
      this.pageNum = 1
      this.pageSize = 100
      this.total = 0
      this.checkList = []
      this.checkAll = false
      this.getFilesList(data.id)
    },
    // 打开所属文件夹
    openfileParent(data) {
      this.fileType = 0
      this.activeIndex = '0'
      this.getFilesList(data.id)
    },
    // 课程下一层级
    nextCourse(data) {
      this.getCourseList(data.keyId, data.keyType, data.indexType, data.folderNo)
    },
    // 批量删除
    deleteByID() {
      this.$confirm(`确定删除已选择文件吗？删除后，可在回收站找回已删除文件`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        let arr = []
        this.checkList.forEach(e => {
          arr.push(e.id)
        })
        let res = await batchDeleteFile({ userId: this.$store.getters.userId, ids: arr.join(',') })
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.pageNum = 1
          this.getFilesList(this.pathArr[this.pathArr.length - 1].id)
          this.checkAll = false
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 移动复制
    handelMove(type) {
      if (this.activeIndex != 7 && this.activeIndex != 8) {
        let arr = []
        let namearr = []
        this.checkList.forEach(e => {
          arr.push(e.id)
          namearr.push(e.fileName)
        })
        this.$refs.moveDialog.show(type, arr, namearr)
      } else {
        this.$refs.copyFormCourse.show(this.checkList)
      }

    },
    // 获取回收站总大小
    async getDustbinSize() {
      let res = await getdustbinfileSize()
      if (res.code == 200) {
        this.dustbintotalSize = res.data && res.data.fileSize ? this.convertBytes(res.data.fileSize) : '0KB'
      } else {
        this.$message.error(res.msg)
      }
    },
    // 清空回收站
    Cleardustbin() {
      this.$confirm(`确定清空回收站？`, '清空回收站', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        let res = await clearDustbinList()
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '清空成功!'
          })
          this.getdustbin()
          this.getDustbinSize()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消清空'
        })
      })
    },
    // 打开上传页面
    uploadFilesopen() {
      this.$refs.uploadInput.clickInput()
    },
    // 获取回收站
    async getdustbin() {
      this.loading = true
      let res = await getdustbinList({
        pageSize: this.pageSize,
        pageNum: this.pageNum
      })
      if (res.code == 200) {
        this.total = res.total
        if (this.pageNum == 1) {
          this.dustbinList = res.rows
        } else {
          this.dustbinList.push(...res.rows)
        }
        this.dustbinList = this.dustbinList.map((item, index) => ({
          ...item,
          index: index + 1
        }))
      }
      this.loading = false
    },
    // 获取内存
    async getstorageInfo() {
      let res = await storageInfo({ userId: this.$store.getters.userId })
      if (res.code == 200) {
        this.storageInfo = res.data
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-tree-node__content:hover, .el-upload-list__item:hover {
  background: #eaf5f3;
}

::v-deep .el-tree-node:focus > .el-tree-node__content {
  background: #eaf5f3;
}

::v-deep .el-tree-node__content {
  padding: 26px;
}

::v-deep .el-input--medium .el-input__icon {
  line-height: 32px !important;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;


  .nav_l {
    width: 58px;
    height: 100%;
    background-color: #ffffff;
    border-right: 1px solid #dddddd;
    max-width: 200px;
    min-width: 160px;
    position: relative;

    .recovery :after {
      content: "";
      width: 100%;
      display: block;
      height: 1px;
      background: #dddddd;
    }

    .active_tree_node {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(40, 178, 139, 1);

      img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }
    }

    .custom_tree_node {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #303133;

      img {
        width: 18px;
        height: 18px;
        margin-right: 6px;
      }
    }

    .menuIcon {
      width: 18px;
      height: 18px;
      margin-right: 6px;
    }

    .library_capacity {
      width: 100%;
      position: absolute;
      bottom: 16px;
      padding: 0 15px;
      box-sizing: border-box;

      .progressText {
        margin-top: 5px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #999999;
      }
    }
  }

  .content_r {
    width: 90%;
    height: calc(100vh - 60px);
    background-color: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;

    .upload_document {

      overflow: scroll;
      width: 100px;
      padding: 10px 15px;
      box-sizing: border-box;
      border: 1px solid #dddddd;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

    }

    .deafult.filecontnet {
      overflow: hidden;
      padding-bottom: 35px;
      box-sizing: border-box;
      flex: 1;
      height: 100%;
      position: relative;

      .empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .dustbin.filecontnet {
      overflow: hidden;
      box-sizing: border-box;
      flex: 1;
      height: 100%;
      position: relative;

      .empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .content_top {
      width: 100%;

      .top_one {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #dddddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;

        ::v-deep .el-input--prefix .el-input__inner {
          height: 32px;
          border-radius: 40px;
          background: rgba(229, 229, 229, 0.5);
          border: 1px solid rgba(229, 229, 229, 0.5);
        }

        .btns {
          display: flex;
          align-items: center;

          div:first-child {
            margin-right: 20px;

            ::v-deep .el-button {
              border: 1px solid rgba(85, 224, 195, 1) !important;
              background: linear-gradient(226.85deg, rgba(85, 224, 195, 1) 0.04%, rgba(77, 224, 179, 1) 100%) !important;
              color: #ffffff !important;
            }
          }

          div:last-child {
            ::v-deep .el-button {
              border: 1px solid rgba(229, 248, 241) !important;
              background: linear-gradient(226.85deg, rgba(85, 224, 195, 0.2) 0.04%, rgba(77, 224, 179, 0.2) 100%) !important;
              color: rgba(40, 178, 139, 1) !important;
            }
          }
        }

      }

      .top_two {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #dddddd;
        display: flex;
        align-items: center;

        div:last-child {
          padding: 0 15px;
          box-sizing: border-box;
          font-size: 12px;
        }
      }

      .top_three {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #dddddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;

        .iconBtn {
          .refreshList {
            margin-right: 10px;
            color: rgba(40, 178, 139, 1);
          }

          display: flex;
          align-items: center;
          font-size: 14px;

          .filterIcon {
            width: 11px;
            height: 10px;
          }
        }
      }
    }

    .dustbin_top {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #dddddd;
      display: flex;
      align-items: center;
      padding: 0 15px;
      box-sizing: border-box;

      .dustbinTotal {
        margin-right: 20px;
        font-size: 14px;
      }

      .tips {
        font-size: 12px;
        color: red;
        margin-left: 20px;
      }

      ::v-deep .el-button {
        border: 1px solid rgba(85, 224, 195, 1) !important;
        background: linear-gradient(226.85deg, rgba(85, 224, 195, 1) 0.04%, rgba(77, 224, 179, 1) 100%) !important;
        color: #ffffff !important;
      }
    }

    .content_footer {
      height: 32px;
      padding: 0 15px;
      box-sizing: border-box;
      border-top: 1px solid #dddddd;
      font-size: 12px;
      position: absolute;
      bottom: 1px;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .getOutgroup {
        width: 68px;
        height: 20px;
        border-radius: 4px;
        background: rgba(255, 87, 51, 1);
        color: #ffffff;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
      }

      .footer_left {
        margin-right: 60px;
      }

      .check_num {
        color: rgba(85, 224, 195, 1);
      }
    }
  }
}

.uploadFile {
  display: none;
}
</style>
